<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #big {
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      overflow: hidden;/*解决子元素粘连问题*/
    }
    #big>div{
      width: 255px;
      height: 242px;
      margin: 68px 0px 0px 36px;
      padding: 5px;
    }
    #p1{
      color: #333333;
      font-size: 32px;
      margin-bottom: 12px;
    }
    #p2 {
      color: #666666;
      font-size: 12px;
      margin-bottom: 24px;
    }
    #p3 {
      font-size: 24px;
      color: #0aa1ed;
      margin-bottom: 12px;
    }
    a{
      background-color: #0aa1ed;
      width: 132px;height: 40px;
      /*超链接是行内元素,无法修改宽高*/
      display: block;
      text-align: center;/*横向居中*/
      line-height: 40px;/*纵向居中*/
      color: white;
      text-decoration: none;
      font-size: 20px;
      /*设置圆角*/
      border-radius: 3px;
    }
  </style>

</head>
<body>
<div id="big">
  <div>
    <p id="p1">灵越 燃7000系列</p>
    <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
      英特尔HD显卡620含共享显卡内存</p>
    <p id="p3">￥4999.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>